<template>
  <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body :show-close="true" :close-on-click-modal="false" :size="size" >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="图片类型" prop="imageType">
            <el-select v-model="form.imageType" placeholder="请选择图片类型" style="width: 100%;">
              <el-option v-for="dict in dict.type.sys_goods_img_type" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存储源" prop="imageServer">
            <el-select v-model="form.imageServer" placeholder="请选择图片存储源" style="width: 100%;" >
              <el-option v-for="dict in dict.type.sys_goods_res_path" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品编码" prop="gNumber">
            <el-input v-model="form.gNumber" placeholder="请输入商品编码" @change="handleGNumberChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名称" prop="gName">
            <el-input v-model="form.gName" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="图片名称" prop="imageName">
            <el-input v-model="form.imageName" placeholder="请输入图片名称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="显示顺序" prop="orderNum">
            <el-input v-model="form.orderNum" placeholder="顺序" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="delFlag">
            <el-radio-group v-model="form.delFlag">
              <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                        :label="dict.value">{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.imageServer === 'http'">
        <el-col :span="24">
          <el-form-item label="网络图片">
            <template v-for="(httpPath, index) in form.imageHttpPath2">
              <el-input v-model="form.imageHttpPath2[index]" placeholder="请输入网络图片链接" >
                <template slot="append">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addHttpImage"
                             v-if="index <= 6 && index === form.imageHttpPath2.length-1" >添加</el-button>
                  <el-button type="danger"  plain icon="el-icon-delete" @click="delHttpImage(index)"
                             v-if="index !== 0 || form.imageHttpPath2.length>1" >删除</el-button>
                </template>
              </el-input>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <template v-if="form.imageHttpPath2 && form.imageHttpPath2.length > 0" >
              <el-image class="http-image-list" fit="contain" v-for="httpPath in form.imageHttpPath2"
                        :src="httpPath" :preview-src-list="getPreviewSrcList(httpPath)" />
            </template>
            <el-image v-else fit="contain" style="height: 100px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="24">
          <el-form-item label="上传图片">
            <image-upload ref="uploadImage" v-model="form.imagePath" :auto-upload="false"
                          :limit="limit" @success="handleImageSuccess" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addImages } from '@/api/goods/images'
import { getMainByGNumber } from '@/api/goods/main'
export default {
  dicts: ['sys_goods_img_type', 'sys_goods_res_path', 'sys_normal_disable'],
  props: {
    params: {
      type: Object,
      default: {}
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    }
  },
  data() {
    return {
      visible: false,
      title: '选择图片',
      limit: 5,
      loading: false,
      // 本地图片资源地址
      imgServe: process.env.VUE_APP_BASE_API,
      queryParams: {
        params: {
          imageTypes: []
        }
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        delFlag: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ],
      }
    }
  },
  methods: {
    generateForm() {
      this.form = {
        imageId: null,
        gNumber: null,
        gName: null,
        imageType: null,
        imageName: null,
        imageServer: null,
        imagePath: null,
        imageHttpPath: null,
        imageHttpPath2: [""],
        orderNum: null,
        delFlag: "0",
        remark: null
      }
    },
    // 表单重置
    reset() {
      this.generateForm();
      this.resetForm("form");
    },
    // 显示弹框
    show() {
      this.generateForm();
      const params = this.params;
      if (params.imageType) {
        if (typeof params.imageType === "string") {
          this.form.imageType = params.imageType;
        } else if (Array.isArray(params.imageType) && params.imageType.length > 0) {
          this.form.imageType = params.imageType[0];
        }
      }
      if (params.limit) {
        this.limit = params.limit;
      } else {
        this.limit = 5;
      }
      this.visible = true;
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.visible = false;
    },
    handleGNumberChange() {
      if (this.form && this.form.gNumber) {
        getMainByGNumber(this.form.gNumber).then(res => {
          if (res.data && res.data.goodsName) {
            this.form.gName = res.data.goodsName;
          }
        })
      }
    },
    /** */
    addHttpImage() {
      this.form.imageHttpPath2.push('');
    },
    delHttpImage(index) {
      this.form.imageHttpPath2.splice(index, 1);
    },
    getPreviewSrcList(httpPath) {
      if (httpPath) {
        let list = [];
        list.push(httpPath);
        return list;
      }
      return [];
    },
    /** 图片提交提交表单 */
    handleImageSuccess(fileList) {
      this.submitImageForm();
    },
    /** 提交信息 */
    submitImageForm() {
      if (this.form.imageId == null) {
        addImages(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.visible = false;
          this.$emit('ok');
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (this.form.imageServer === 'http') {
            this.form.imagePath = this.form.imageHttpPath2.join(',');
          }
          if (this.form.imageServer === 'http' || this.form.imagePath) {
            this.submitImageForm();
          } else {
            let files = this.$refs.uploadImage.$refs.imageUpload.uploadFiles; // 获取选中的文件列表
            if (files && files.length > 0) {
              this.$refs.uploadImage.$refs.imageUpload.submit(); // 手动调用上传
            } else {
              this.$modal.msgError("请先选择图片");
            }
          }
        }
      });
    },
  }

}
</script>

<style scoped>
::v-deep .el-table .el-table__body-wrapper .el-table__cell {
  padding: 5px 0 2px 0;
}
.http-image-list {
  height: 100px;
  margin-right: 18px;
}
</style>
